      /* eslint-disable no-undef */
<template>
  <div class="homePage">
    {{ value }}
    <div>
      <el-row :gutter="10">
        <el-col :span="16" style="height:100%">
          <div class="">
            <el-row>
              <el-card style="height: 400px;">
                <el-col :span="18">
                  <el-row>
                    <el-col :span="24">
                      <chart
                        ref="chart"
                        :title-text="'客户信息'"
                        :legend-position="'bottom'"
                        :series-defaults-type="'area'"
                        :value-axis-line-visible="false"
                        :category-axis-categories="allCustInfo.categories"
                        :category-axis-major-grid-lines-visible="false"
                        :tooltip-visible="true"
                        :tooltip-template-format="'{0}%'"
                        :tooltip-template="tooltipTemplate"
                        :theme="'sass'"
                        style="height:300px;width:100%"
                      >
                        <chart-series-item
                          :name="'全量客户总数'"
                          :data="allCustInfo.chromeData"
                        />
                      </chart>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-row>
                        <el-col :span="12">
                          <sparkline
                            :type="'area'"
                            :data="humLogData"
                            :tooltip-format="'{0}'"
                            :theme="'sass'"
                            style="height:60px;width:100%"
                          />
                        </el-col>
                        <el-col :span="12">
                          <el-row class="custNumSmall">
                            <el-col :span="24" class="custNumsLabel">有效客户</el-col>
                            <el-col :span="24" class="custNumsValAdd">+<countTo :start-val="0" :end-val="999" :duration="1000" class="" /></el-col>
                            <el-col :span="24" class="custNumsVal">总数：<countTo :start-val="0" :end-val="2000000" :duration="1000" class="" /></el-col>
                          </el-row>
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col :span="12">
                      <el-row>
                        <el-col :span="12">
                          <sparkline
                            :type="'area'"
                            :data="humLogData"
                            :tooltip-format="'{0} %'"
                            :theme="'sass'"
                            style="height:60px;width:100%"
                          />
                        </el-col>
                        <el-col :span="12">
                          <el-row class="custNumSmall">
                            <el-col :span="24" class="custNumsLabel">潜在客户</el-col>
                            <el-col :span="24" class="custNumsValAdd">+<countTo :start-val="0" :end-val="999" :duration="1000" class="" /></el-col>
                            <el-col :span="24" class="custNumsVal">总数：<countTo :start-val="0" :end-val="2000000" :duration="1000" class="" /></el-col>
                          </el-row>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="6" style="padding:25px">
                  <el-row class="custNumsList">
                    <el-col :span="24" class="custNumsLabel">较年初客户净增</el-col>
                    <el-col :span="24" class="custNumsValAdd">+<countTo :start-val="0" :end-val="allCustInfo.add" :duration="1000" class="" /></el-col>
                  </el-row>
                  <el-row class="custNumsList">
                    <el-col :span="24" class="custNumsLabel">较年初客户退出</el-col>
                    <el-col :span="24" class="custNumsValSubtr">-<countTo :start-val="0" :end-val="allCustInfo.exit" :duration="1000" class="" /></el-col>
                  </el-row>
                  <el-row class="custNumsList">
                    <el-col :span="24" class="custNumsLabel">较年初客户净增</el-col>
                    <el-col :span="24" class="custNumsValRatio">+<countTo :start-val="0" :end-val="allCustInfo.ratio" :decimals="2" :duration="1000" class="" />%</el-col>
                  </el-row>
                </el-col>
              </el-card>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8">
          <el-card style="height: 400px;">
            <el-col :span="12" style="padding:5px">
              <el-card>
                <el-row class="custNumsList">
                  <el-col :span="24" class="custNumsLabel">借记卡客户</el-col>
                  <el-col :span="24" class="custNumsVal"><countTo :start-val="0" :end-val="2000000" :duration="1000" class="" /></el-col>
                  <el-col :span="24" class="custNumsValAdd">+<countTo :start-val="0" :end-val="999" :duration="1000" class="" /></el-col>
                </el-row>
              </el-card>
            </el-col>
            <el-col :span="12" style="padding:5px">
              <el-card>
                <el-row class="custNumsList">
                  <el-col :span="24" class="custNumsLabel">信用卡客户</el-col>
                  <el-col :span="24" class="custNumsVal"><countTo :start-val="0" :end-val="2000000" :duration="1000" class="" /></el-col>
                  <el-col :span="24" class="custNumsValAdd">+<countTo :start-val="0" :end-val="999" :duration="1000" class="" /></el-col>
                </el-row>
              </el-card>
            </el-col>
            <el-col :span="12" style="padding:5px">
              <el-card>
                <el-row class="custNumsList">
                  <el-col :span="24" class="custNumsLabel">全渠道客户</el-col>
                  <el-col :span="24" class="custNumsVal"><countTo :start-val="0" :end-val="2000000" :duration="1000" class="" /></el-col>
                  <el-col :span="24" class="custNumsValAdd">+<countTo :start-val="0" :end-val="999" :duration="1000" class="" /></el-col>
                </el-row>
              </el-card>
            </el-col>
            <el-col :span="12" style="padding:5px">
              <el-card>
                <el-row class="custNumsList">
                  <el-col :span="24" class="custNumsLabel">App客户</el-col>
                  <el-col :span="24" class="custNumsVal"><countTo :start-val="0" :end-val="2000000" :duration="1000" class="" /></el-col>
                  <el-col :span="24" class="custNumsValAdd">+<countTo :start-val="0" :end-val="999" :duration="1000" class="" /></el-col>
                </el-row>
              </el-card>
            </el-col>
            <el-col :span="12" style="padding:5px">
              <el-card>
                <el-row class="custNumsList">
                  <el-col :span="24" class="custNumsLabel">渠化客户</el-col>
                  <el-col :span="24" class="custNumsVal"><countTo :start-val="0" :end-val="2000000" :duration="1000" class="" /></el-col>
                  <el-col :span="24" class="custNumsValAdd">+<countTo :start-val="0" :end-val="999" :duration="1000" class="" /></el-col>
                </el-row>
              </el-card>
            </el-col>
            <el-col :span="12" style="padding:5px">
              <el-card>
                <el-row class="custNumsList">
                  <el-col :span="24" class="custNumsLabel">三全客户</el-col>
                  <el-col :span="24" class="custNumsVal"><countTo :start-val="0" :end-val="2000000" :duration="1000" class="" /></el-col>
                  <el-col :span="24" class="custNumsValAdd">+<countTo :start-val="0" :end-val="999" :duration="1000" class="" /></el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top:10px">
        <el-col :span="12">
          <el-card style="height:280px">
            <el-row>
              <el-col :span="7">
                <el-row class="custNumSmall" style="padding: 40px 10px 40px 10px;">
                  <el-col :span="24" class="custNumsLabel">较昨日新增</el-col>
                  <el-col :span="24" class="custNumsValAdd">+<countTo :start-val="0" :end-val="1231" :duration="1000" class="" /></el-col>
                </el-row>
                <el-row class="custNumSmall" style="padding: 40px 10px 40px 10px;">
                  <el-col :span="24" class="custNumsLabel">活跃客户余额</el-col>
                  <el-col :span="24" class="custNumsVal">￥<countTo :start-val="0" :end-val="2000000" :duration="1000" class="" /></el-col>
                </el-row>
              </el-col>
              <el-col :span="17">
                <chart
                  :title-text="'活跃客户'"
                  :legend-visible="false"
                  :series-defaults-type="'column'"
                  :series="series"
                  :category-axis="categoryAxis"
                  :value-axis="valueAxis"
                  :tooltip="tooltip"
                  :theme="'sass'"
                  style="height:250px;width:100%"
                />
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card style="height:280px">
            <el-row>
              <el-col :span="10">
                <el-row class="custNumSmall" style="padding: 40px 10px 40px 10px;">
                  <el-col :span="24" class="custNumsLabel">较上月新增</el-col>
                  <el-col :span="24" class="custNumsValAdd">+<countTo :start-val="0" :end-val="1231" :duration="1000" class="" /></el-col>
                </el-row>
                <el-row class="custNumSmall" style="padding: 40px 10px 40px 10px;">
                  <el-col :span="24" class="custNumsLabel">当前日活用户</el-col>
                  <el-col :span="24" class="custNumsVal"><countTo :start-val="0" :end-val="213131" :duration="1000" class="" /></el-col>
                </el-row>
              </el-col>
              <el-col :span="14">
                <chart
                  :title-text="'日活用户环比'"
                  :legend-visible="false"
                  :series-defaults-type="'column'"
                  :series="series"
                  :category-axis="categoryAxis"
                  :value-axis="valueAxis"
                  :tooltip="tooltip"
                  :theme="'sass'"
                  style="height:250px;width:100%"
                />
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card style="height:280px">
            <el-row>
              <el-col :span="10">
                <el-row class="custNumSmall" style="padding: 40px 10px 40px 10px;">
                  <el-col :span="24" class="custNumsLabel">较去年新增</el-col>
                  <el-col :span="24" class="custNumsValAdd">+<countTo :start-val="0" :end-val="1231" :duration="1000" class="" /></el-col>
                </el-row>
                <el-row class="custNumSmall" style="padding: 40px 10px 40px 10px;">
                  <el-col :span="24" class="custNumsLabel">当前月活用户</el-col>
                  <el-col :span="24" class="custNumsVal"><countTo :start-val="0" :end-val="231443423" :duration="1000" class="" /></el-col>
                </el-row>
              </el-col>
              <el-col :span="14">
                <chart
                  :title-text="'月活用户环比'"
                  :legend-visible="false"
                  :series-defaults-type="'column'"
                  :series="series"
                  :category-axis="categoryAxis"
                  :value-axis="valueAxis"
                  :tooltip="tooltip"
                  :theme="'sass'"
                  style="height:250px;width:100%"
                />
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top:10px">
        <el-col :span="12">
          <el-card style="height:280px">
            <el-row>
              <el-col :span="17">
                <el-row>
                  <el-col>
                    <el-row class="custNumSmall">
                      <el-col :span="24" class="custNumsLabel">VIP总客户数：<countTo :start-val="0" :end-val="1543234" :duration="1000" class="" /></el-col>
                      <el-col :span="24" class="custNumsValAdd">较昨日新增：+<countTo :start-val="0" :end-val="999" :duration="1000" class="" /> | 管户率：<countTo :start-val="0" :end-val="88" :decimals="2" :duration="1000" class="" />%</el-col>                    </el-row>
                  </el-col>
                </el-row>
                <el-row>
                  <chart
                    ref="chart"
                    :data-source="grandSlam"
                    :title-text="'VIP客户贡献值'"
                    :legend-position="'bottom'"
                    :series-defaults-type="'line'"
                    :value-axis-line-visible="false"
                    :category-axis-major-grid-lines-visible="false"
                    :tooltip-visible="true"
                    :tooltip-template="tooltipTemplate"
                    :theme="'sass'"
                    style="height:200px"
                  >
                    <chart-series-item
                      :name="'Wins'"
                      :field="'win'"
                      :category-field="'year'"
                      :note-text-field="'extremum'"
                      :notes-label-position="'bottom'"
                      :notes-position="'bottom'"
                    />
                    <chart-series-item
                      :name="'Losses'"
                      :field="'loss'"
                    />
                  </chart>
                </el-row>
              </el-col>
              <el-col :span="7">
                <el-row class="custNumSmall" style="padding: 40px 10px 40px 10px;">
                  <el-col :span="24" class="custNumsLabel">较昨日新增</el-col>
                  <el-col :span="24" class="custNumsValAdd">+<countTo :start-val="0" :end-val="1231" :duration="1000" class="" /></el-col>
                </el-row>
                <el-row class="custNumSmall" style="padding: 40px 10px 40px 10px;">
                  <el-col :span="24" class="custNumsLabel">活跃客户余额</el-col>
                  <el-col :span="24" class="custNumsVal">￥<countTo :start-val="0" :end-val="2000000" :duration="1000" class="" /></el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card style="height:280px">
            <el-row>
              <el-col :span="10">
                <el-row class="custNumSmall" style="padding: 40px 10px 40px 10px;">
                  <el-col :span="24" class="custNumsLabel">农户总数</el-col>
                  <el-col :span="24" class="custNumsVal"><countTo :start-val="0" :end-val="123123343" :duration="1000" class="" /></el-col>
                </el-row>
                <el-row class="custNumSmall" style="padding: 40px 10px 40px 10px;">
                  <el-col :span="24" class="custNumsLabel">昨日新增</el-col>
                  <el-col :span="24" class="custNumsValAdd">+<countTo :start-val="0" :end-val="6267" :duration="1000" class="" /></el-col>
                </el-row>
              </el-col>
              <el-col :span="14">
                <chart
                  ref="chart"
                  :title-text="'涉农客户'"
                  :legend-position="'bottom'"
                  :tooltip-visible="true"
                  :tooltip-template="template"
                  :theme="'sass'"
                  style="height:250px;width:100%"
                >
                  <chart-series-item
                    :type="'donut'"
                    :data="seriesData_s"
                    :labels-template="template"
                    :labels-position="'outsideEnd'"
                    :labels-background="'transparent'"
                    :labels-align="labelAlign"
                  />
                </chart>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card style="height:280px">
            <el-row>
              <el-col :span="10">
                <el-row class="custNumSmall" style="padding: 40px 10px 40px 10px;">
                  <el-col :span="24" class="custNumsLabel">农户总数</el-col>
                  <el-col :span="24" class="custNumsVal"><countTo :start-val="0" :end-val="123123343" :duration="1000" class="" /></el-col>
                </el-row>
                <el-row class="custNumSmall" style="padding: 40px 10px 40px 10px;">
                  <el-col :span="24" class="custNumsLabel">昨日新增</el-col>
                  <el-col :span="24" class="custNumsValAdd">+<countTo :start-val="0" :end-val="6267" :duration="1000" class="" /></el-col>
                </el-row>
              </el-col>
              <el-col :span="14">
                <chart
                  ref="chart"
                  :title-text="'普惠客户'"
                  :legend-position="'bottom'"
                  :tooltip-visible="true"
                  :tooltip-template="template"
                  :theme="'sass'"
                  style="height:250px;width:100%"
                >
                  <chart-series-item
                    :type="'donut'"
                    :data="seriesData_p"
                    :labels-template="template"
                    :labels-position="'outsideEnd'"
                    :labels-background="'transparent'"
                    :labels-align="labelAlign"
                  />
                </chart>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  import { Chart, ChartSeriesItem } from '@progress/kendo-charts-vue-wrapper'
  import { Sparkline } from '@progress/kendo-charts-vue-wrapper'
  import countTo from 'vue-count-to'
  export default {
    name: 'App',
    components: {
      'chart': Chart,
      'chart-series-item': ChartSeriesItem,
      'sparkline': Sparkline,
      countTo
    },
    data: function() {
      return {
        value: '1、待发起：录入表单信息暂存还未提交。</br>2、审查中：该表单需要合规审查，正在合规审查岗进行合规审查。</br>3、已退回：该表单未通过审查，合规审查岗“退回”处理。</br>4、签约中，表单信息录入完毕并提交，客户电子渠道端已可看到该待签约表单文本，但还未完成签约，如果某一表单有多个签约人的，任一签约人未签约均为此状态。5、已签约，客户已在电子渠道端完成对该表单的签约，如某一表单有多个签约人的，所有签约人完成签约为此状态。6、已撤销，该表单文本已处于待签约状态但还未签约，客户经理可发起撤销，撤销后，客户不再在电子渠道端看到该表单。如该表单有多个签约人的，如有任一客户处于待签约状态但未签约的，客户经理可发起撤销，撤销后，包括该表单下已签约的客户也不再在电子渠道端看到该系统包括已签约客户全部为已撤销状态。7、已收回，该表单已处于已签约状态，客户经理可发起收回，收回后，客户不再在电子渠道端看到该表单，表单有多个签约人，信贷与投资管理系统全部为已收回状态。8、已拒绝，该表单客户在电子渠道端点击“拒绝”  ，如某一表单有多个签约人的，任一一人拒绝后，其他签约人表单无论状态如何，均强制撤回，撤回后，包括该表单表单，信贷与投资管理下已签约的客户也不再在电子渠道看到该表单，信贷与投资管理系统包括已签约的客户全部为已拒绝状态。',
        allCustInfo: {},
        humLogData: [
          91, 70, 69, 68, 65, 60, 55, 55, 50, 52,
          73, 72, 72, 71, 68, 63, 57, 58, 53, 55,
          63, 59, 61, 64, 58, 53, 48, 48, 45, 45,
          63, 64, 63, 67, 58, 56, 53, 59, 51, 20
        ],
        tooltipTemplate: '#= series.name #: #= value #',

        series: [{
                   name: 'Total Visits',
                   data: [56000]
                 },
                 {
                   name: 'Unique visitors',
                   data: [52000]
                 }],
        valueAxis: [{
          max: 60000,
          line: {
            visible: false
          },
          minorGridLines: {
            visible: true
          },
          labels: {
            rotation: 'auto'
          }
        }],
        categoryAxis: {
          categories: ['Jan'],
          majorGridLines: {
            visible: false
          }
        },
        tooltip: {
          visible: true,
          template: '#= series.name #: #= value #'
        },

        grandSlam: [{
          'year': '2003',
          'win': 13,
          'extremum': 'MIN: 13',
          'loss': 3
        }, {
          'year': '2004',
          'win': 22,
          'loss': 1
        }, {
          'year': '2005',
          'win': 24,
          'loss': 2
        }, {
          'year': '2006',
          'win': 27,
          'extremum': 'MAX: 27',
          'loss': 1
        }, {
          'year': '2007',
          'win': 26,
          'loss': 1
        }, {
          'year': '2008',
          'win': 24,
          'loss': 3
        }, {
          'year': '2009',
          'win': 26,
          'loss': 2
        }, {
          'year': '2010',
          'win': 20,
          'loss': 3
        }, {
          'year': '2011',
          'win': 20,
          'loss': 4
        }, {
          'year': '2012',
          'win': 19,
          'loss': 3
        }],

        labelAlign: 'circle',
        seriesData_s: [{
          category: '其他客户',
          value: 39
        }, {
          category: '涉农客户',
          value: 11
        }],
        seriesData_p: [{
          category: '其他客户',
          value: 32
        }, {
          category: '普惠客户',
          value: 18
        }],
        template: "#= category # - #= kendo.format('{0:P}', percentage) #"
      }
    },
    mounted() {
      this.findAllCustInfo()
    },
    methods: {
      findAllCustInfo() {
        this.$post('/service/echarts/findAllCustInfo', this.login).then(res => {
          this.allCustInfo = Object.assign({}, this.deepCopy(res.allCustInfo))
        }).catch(e => {
          console.log(e)
        })
      }
    }
  }
</script>

<style>
  .homePage{
    margin-bottom: 20px;
  }
  .homePage .el-card__body{
    padding: 10px;
  }
  .homePage .custNumsList{
    padding-top: 20px;
    padding-left: 10px;
  }
  .homePage .custNumSmall{
    padding-left: 10px;
  }
  .homePage .custNumSmall .custNumsLabel{
    font-weight: bold;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .homePage .custNumSmall .custNumsValAdd{
    font-size: 1em;
    color: red;
  }
  .homePage .custNumSmall  .custNumsValSubtr{
    font-size: 1em;
    color: greenyellow;
  }

  .homePage .custNumSmall  .custNumsValRatio{
    font-size: 1em;
    color: red;
  }

  .homePage .custNumsList .custNumsLabel{
    font-weight: bold;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .homePage .custNumsList .custNumsValAdd{
    font-size: 1.5em;
    color: red;
  }
  .homePage .custNumsList  .custNumsValSubtr{
    font-size: 1.5em;
    color: greenyellow;
  }

  .homePage .custNumsList  .custNumsValRatio{
    font-size: 1.5em;
    color: red;
  }
</style>
